<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <ul>
      <li v-for="item in users" :key="item.id">{{item.name}}</li>
    </ul>
  </div>

  <!-- 第3步：实例化vue -->
  <script src="./js/axios.js"></script>
  <script>
    // axios全局配置
    axios.defaults.baseURL = 'http://localhost:9000';
    // 设置超时时间 ms
    axios.defaults.timeout = 10000
    // axios.defaults.headers.token = 'aaaaa'

    // 拦截器  ==> 中间件
    // 请求拦截器  回调函数中的config对象一定要return出去
    axios.interceptors.request.use(config => {
      // console.log(config);
      if (config.method === 'get') {
        config.headers.token = 'abc'
      }
      return config
    })

    // 响应拦截器
    axios.interceptors.response.use(res => {
      console.log(res);
      if (res.data.code == 0) return res.data
      alert('有错')
    }, err => Promise.reject(err))


    const vm = new Vue({
      el: '#app',
      data: {
        users: []
      },
      mounted() {
        /* axios.get('/api/users', {
          headers: {
            token: 'abc'
          }
        }).then(ret => {
          console.log(ret.data);
        }).catch(() => console.log('有异常')) */
        axios.get('/api/users').then(ret => {
          console.log(ret);
        })

        // axios.get('/api/users?id=1').then(ret => {
        //   console.log(ret.data);
        // }, () => console.log('有异常'))

        /* axios.post('/api/users', {
          name: '李四'
        }, {
          headers: {
            token: 'abc'
          }
        }).then(ret => {
          console.log(ret.data);
        })*/

        /* axios.put('/api/users', {
          name: '李四 -- put'
        }, {
          headers: {
            token: 'abc'
          }
        }).then(ret => {
          console.log(ret.data);
        }) */

        /* axios.delete('/api/users/100',null, {
          headers: {
            token: 'abc'
          }
        }).then(ret => {
          console.log(ret.data);
        }) */



      }
    })
  </script>

</body>

</html>